.ul {
	background-color: #fff;
	margin-top: 40upx;
	border-bottom: 1upx solid #ddd;

	&.with-li-cards {
		border: none;
		.title-box {
			border: none;
		}
	}

	&.with-li-big-cards {
		border: none;
		.li-cards {
			.li-box {
				width: 710upx;

				.li {
					.icon {
						width: 710upx;
						border-radius: 20upx;
					}

					.name {
						font-size: $uni-font-size-lg;
						color: #333;
						margin: 10upx 4upx;
					}

					.sub-name {
						color: #999;
						font-size: $uni-font-size-sm;
						margin: 0 4upx;
					}
				}
			}
		}

		.title-box {
			border: none;
		}
	}
	.li-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20upx;
		.li-box {
			width: 345upx;
			height: inherit;
			line-height: inherit;
			margin-bottom: 30upx;
			.li {
				flex-direction: column;
				align-items: flex-start;
				border: none;
				height: inherit;
				line-height: inherit;
				margin: 0;

				.name {
					color: #666;
					font-size: $uni-font-size-base;
					margin: 0 4upx;
					margin-top: 10upx;
				}
				.icon {
					width: 345upx;
					height: 300upx;
					border-radius: 20upx;
				}
			}
		}
	}

	&:first-child {
		margin-top: 0;
	}

	&.with-input {
		input {
			height: 90upx;
			line-height: 90upx;
			font-size: $uni-font-size-base;
			flex: 1;
		}

		textarea {
			font-size: $uni-font-size-base;
			flex: 1;
		}
		.li-box {
			&:active {
				background-color: $uni-bg-color;
			}
		}
	}

	&.with-have-no-click-bg {
		.li-box {
			&:active {
				background-color: $uni-bg-color;
			}
		}
	}

	&.with-have-no-mt {
		margin-top: 0;
	}

	.title-box {
		padding: 20upx;
		font-size: $uni-font-size-sm;
		border-bottom: 1upx solid #ddd;
		color: $uni-text-color-placeholder;

		display: flex;
		justify-content: space-between;
		align-items: center;
		.iconfont {
			font-size: $uni-font-size-base;
			color: $uni-text-color-placeholder;
		}
	}
	.li-box {
		height: 100upx;
		&:last-child {
			.li {
				border: none;
			}
		}

		&.with-textarea {
			height: inherit;
			padding-top: 20upx;
			padding-bottom: 20upx;
			.li {
				height: inherit;
				align-items: flex-start;
			}
		}

		&:active {
			background-color: $uni-bg-color-hover;
		}

		&.with-have-no-click-bg {
			&:active {
				background-color: $uni-bg-color;
			}
		}

		&.with-have-click-bg {
			&:active {
				background-color: $uni-bg-color-hover;
			}
		}

		.li {
			margin-left: 20upx;
			height: 100upx;
			border-bottom: 1upx solid #ddd;
			display: flex;
			align-items: center;
			padding-right: 20upx;
			font-size: $uni-font-size-lg;
			view:last-child {
				margin-right: 0;
			}

			view {
				overflow-x: hidden;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.icon {
				height: 40upx;
				width: 40upx;
				margin-right: 20upx;
			}

			.name,
			.sub-name,
			.li-after {
				margin-right: 20upx;
			}

			.li-after {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				flex: 1;
				text-align: right;
			}

			.more {
				text-align: right;
				color: $uni-text-color-disable;
			}
		}
	}
}
